<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box">
      <h1>{{msg}}</h1>
      <h2>{{num}}</h2>
      <h2>{{num>5?"vue好学":"vue不好学"}}</h2>

      <button @click="fun1">打印msg</button>
      <button @click="fun2">num++</button>

      <!-- {{fun1()}} -->
    </div>

    <script src="vue-2.4.0.js"></script>
    <script>
      var vm = new Vue({
        el: "#box", //指定vue实例的作用范围
        data: {
          msg: "hello world",
          num: 10,
        }, //放数据（变量）的地方
        methods: {
          fun1() {
            console.log(this.msg);
          },
          fun2: function () {
            // console.log(this.num);
            this.num++;
          },
        },
      });
      //   vue实例中的{}里面放的东西叫做选项对象
      //   1.el 指定实例的作用范围
      //    2. data 存放数据（就是之前的变量）的地方
      //   3.methods 方法是存放函数的地方 在methods中使用data 的时候加上this.xx

      //模版语法  就是在html中放js代码
      //在vue中模版语法 是{{}}  就可以把data展示在页面中

      //数据改变 视图会跟着更新
    </script>
  </body>
</html>
